<template >
  <div class="exam bg" ref="exam">
    <step :list="list" :active="active" />
    <template v-if="list.length>0&&list[active]">
      <template v-if="Array.isArray(list[active].subject)">
        <div v-for="(item,i) in list[active].subject" :key="i" class="input-answer">
          <span>{{item}}</span>
          <van-cell-group class="van-hairline--surround" v-if="i<list[active].subject.length-1">
            <van-field :value="answerObj[i].join(',')" @focus="answerPicker[i] = true" @click.native="answerPicker[i] = true" readonly />
            <van-popup v-model="answerPicker[i]" position="bottom" get-container="#app" class="input-answer">
              <van-cell>
                <template slot="title">
                  <span class="van-picker__cancel" @click="answerPicker[i] = false" />
                </template>
                <template slot="right-icon">
                  <span class="van-picker__confirm" @click="confirmPicker(i)" />
                </template>
              </van-cell>
              <van-checkbox-group v-model="answerObj[i]">
                <van-checkbox v-for="(v,index) in list[active].options" :name="v.label" :key="index">{{v.label}}.{{v.value}}</van-checkbox>
              </van-checkbox-group>
            </van-popup>
          </van-cell-group>
        </div>
      </template>
      <template v-else>
        <h3 style="margin-bottom:0">{{active+1}}. {{list[active].subject}}</h3>
        <template v-if="list[active].answer.split(',').length<=1">
          <van-radio-group v-model="answer">
            <van-radio style="line-height:1" v-for="(item,i) in list[active].options" v-if="item.value" :name="item.label" :key="i">{{item.value}}</van-radio>
          </van-radio-group>
        </template>
        <template v-else>
          <van-checkbox-group v-model="answerArr">
            <van-checkbox style="line-height:1" v-for="(item,i) in list[active].options" v-if="item.value" :name="item.label" :key="i">{{item.value}}</van-checkbox>
          </van-checkbox-group>
        </template>
      </template>
    </template>
    <div class="next">
      <van-button style="margin-top:calc(54rem/75)" type="danger" @click="submit" :loading="loading" class="btn">
        {{active < list.length - 1?'下一题':'提交'}} 
      </van-button> 
    </div> 
  </div> 
</template>

<script>
import { mapGetters } from 'vuex'
import step from 'components/step'
import { trained, success, failure } from 'api'
import { log } from 'util'
export default {
  name: 'exam',
  components: {
    step
  },
  computed: {
    ...mapGetters(['ques', 'answerList', 'info', 'quesStatus'])
  },
  data() {
    return {
      active: 0,
      list: [],
      loading: false,
      answerObj: {},
      answerPicker: {},
      answerArr: [],
      answer: ''
    }
  },
  created() {
    this.$store.commit('SET_ANSWER', false)
    this.active = Number(this.$route.query['ques'] || 0)
    this.list = this.ques
    if (Array.isArray(this.list[this.active].subject)) {
      this.answerObj = { ...this.list[this.active].subject.map(v => []) }
      this.answerPicker = { ...this.list[this.active].subject.map(v => false) }
    }
  },
  watch: {
    '$route.query.ques'(val) {
      this.active = Number(val)
      if (Array.isArray(this.list[this.active].subject)) {
        this.answerObj = { ...this.list[this.active].subject.map(v => []) }
        this.answerPicker = {
          ...this.list[this.active].subject.map(v => false)
        }
      }
      this.answer = ''
      this.answerArr = []
    },
    quesList(val) {
      this.list = val
    },
    answer(val) {
      let newArr = [...this.answerList]
      newArr[this.active] = val
      this.$store.commit('SET_ANSWER_LIST', newArr)
    },
    answerArr(val) {
      let newArr = [...this.answerList]
      newArr[this.active] = val.join(';')
      this.$store.commit('SET_ANSWER_LIST', newArr)
    }
  },
  methods: {
    confirmPicker(i) {
      let newArr = [...this.answerList]
      newArr[this.active] = Object.values(this.answerObj)
        .map(
          v =>
            (v = Object.values(v)
              .sort()
              .join(','))
        )
        .join('|')
      console.log(newArr[this.active])
      this.$store.commit('SET_ANSWER_LIST', newArr)
      this.answerPicker[i] = false
    },
    async submit() {
      if (this.active < this.list.length - 1) {
        if (!this.answerList[this.active]) {
          this.$toast('未选择答案')
        } else {
          this.active++
          this.$router.push({ path: 'exam', query: { ques: this.active } })
        }
      } else {
        const answer = this.list.map(v => v.answer)
        let cut = 0
        answer.forEach((v, i) => {
          if (this.answerList[i].split(';').length > 1) {
            if (
              this.answerList[i]
                .split(';')
                .sort()
                .join(',') === v
            ) {
              cut++
            }
          } else if (this.answerList[i] === v) {
            cut++
          }
        })
        const passed = cut / this.list.length >= 0.6
        this.loading = true
        this.$store.commit('SET_RIGHT', cut)
        if (passed) {
          await success({ id: this.quesStatus.id })
          this.$store.commit('SET_PASS', passed)
        } else {
          await failure({ id: this.quesStatus.id })
        }
        this.loading = false
        this.$router.push('/answer')
      }
    }
  }
}
</script>

<style lang="stylus">
.exam
  padding 69px 80px 103px

  h3
    font-size 30px

  .van-radio__label, .van-checkbox__label
    font-size 28px
    display inline
    line-height auto
  .van-checkbox__icon
    .van-icon
      width 30px
      height 30px
  .van-checkbox__icon--checked .van-icon
    background url('../assets/img/check.png') center center no-repeat
    background-size contain
    border-color #aaa
    vertical-align middle

    &:before
      content ''

  .van-radio__input
    width 30px
    height 30px
    background url('../assets/img/radio.png') center center no-repeat
    background-size contain
    vertical-align middle

    .van-icon
      
      &.van-icon-checked
        width 30px
        height 30px
        background url('../assets/img/check.png') center center no-repeat
        background-size contain

      &::before
        content ''

  .next
    text-align center
    font-size 18px

.input-answer
  font-size 30px
  display inline
  word-break break-all
  font-weight bold

  input
    text-align center

  .van-radio__label, .van-checkbox__label
    font-size 28px
    display inline
    line-height auto
  .van-checkbox__icon
    .van-icon
      width 30px
      height 30px
  .van-checkbox__icon--checked .van-icon
    background url('../assets/img/check.png') center center no-repeat
    background-size contain
    border-color #aaa
    vertical-align middle

    &:before
      content ''

  .van-radio__input
    width 30px
    height 30px
    background url('../assets/img/radio.png') center center no-repeat
    background-size contain
    vertical-align middle

    .van-icon
      &.van-icon-checked
        width 30px
        height 30px
        background url('../assets/img/check.png') center center no-repeat
        background-size contain

      &::before
        content ''

  .van-cell.van-field
    padding 0

  .van-cell
    font-size 40px
    line-height 1

  .van-checkbox
    font-size 38px
    line-height 1.5

  .van-cell-group
    background transparent
    width 80px
    display inline-block

    .van-cell
      background transparent
      border-bottom 3px solid #333

  .van-checkbox-group
    padding 0 80px

    .van-checkbox__label
      font-size 38px
      line-height 2.5
</style>
